<template>
  <div class="carmarket">
    <!-- 图片 -->
    <div class="pic">
      <img src="https://youjia.cdn.bcebos.com/bg_xinche.jpg">
    </div>
    <!-- 标签页 -->
    <van-tabs v-model="active" color="transparent" title-active-color="#356fff">
      <van-tab v-for="(item,index) in databases" :key="index">
        <template #title>{{item[0].name}}</template>
        <div v-for="(items,index2) in item[1]" :key="index2">
            <van-index-anchor :index="items.name" v-if="items.name"/>
            <div class="lable">
              <div class="left">
                <img :src="items.white_bg_img">
              </div>
              <div class="right">
                <div class="sname">{{items.series_name}}</div>
                <div class="tag">{{items.tag}}</div>
                <div class="price">{{items.price}}</div>
              </div>
            </div>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'carmarket',
  data() {
    return {
      active: 0,
      databases:[]
    }
  },
  async created(){
    await axios.get('http://localhost:9527/carMarket.json')
      .then(res=>{
        console.log(res.data.Result.list)
        this.databases = res.data.Result.list
      })
  },
}
</script>

<style lang="scss" scoped>
.carmarket{
  width: 100%;
  padding-top: 46px;
  // overflow-x:hidden;
  .pic{
      height: 252px;
      width: 100%;
      img{
        width: 100%;
        height: 100%;
      }
    }
  
  }
  .van-tabs__content{
    .lable{
      height: 100px;
      display: flex;
      align-items: center;
      padding-left: 20px;
      padding-right: 20px;
      .left{
        width: 100px;
        height: 67px;
        img{
          width: 100%;
          height: 100%;
        }
      }
      .right{
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        height: 80%;
        justify-content: space-around;
        .sname{
          font-size: 16px;
          line-height: 16px;
          color: #242a33;
          font-weight: 700;
          max-width: 120px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
        .tag{
          height: 18px;
          padding: 0 2px;
          width: 60px;
          font-size: 11px;
          line-height: 18px;
          text-align: center;
          color: #242a33;
          border-radius: 3px;
          background: #eee;
          display: inline-block;
        }
        .price{
          font-size: 14px;
          color: red;
        }
      }
      }
    }
    .carmarket ::v-deep {
      .van-tabs{
        width: 100%;
        height: 30px;
        padding-top: 10px;
        padding-bottom: 10px;
        .van-tab{
          display: inline-block;
          width: 68px;
          height: 30px;
          font-size: 14px;
          line-height: 30px;
          text-align: center;
          color: #333;
          font-weight: 700;
          padding: 0;
        }
    }
  }
    
  .carmarket ::v-deep  .van-index-anchor{
    width: 100%;
    height: 25px;
    padding-left: 17px;
    font-size: 13px;
    line-height: 25px;
    color:#666;
    background-image: linear-gradient(270deg,#fff,#f8f8f8 99%);
  }
</style>
